import { Button, NavBar,Mask,Form,Input } from 'antd-mobile';
import React, { useState } from 'react'
import { useLocation, useNavigate } from 'react-router-dom'
import LIstItem from '../../components/LIstItem';
import { useDispatch, useSelector } from 'react-redux';
import { addPersonList, delPersonList } from '../../store/person/personList';
import axios from 'axios';

function Detail() {
    const {state}=useLocation();
    const navigate=useNavigate();
    const dispatch=useDispatch();
    //添加成人弹框
    const [visible, setVisible] = useState(false)
    const personList=useSelector(state=>state.person.personList);
    //选座
    const [list,setList]=useState(["A","B","C","D","E","F"])
    const [site,setSite]=useState("A","B");
    //删除
    const handleDel=(v)=>{
        dispatch(delPersonList(v))
    }
    const onFinish=(value)=>{
        console.log(value)
        setVisible(false)
        //添加成人
        dispatch(addPersonList(value))
    }
    //支付
    const handleSend=async()=>{
        const res=await axios.get('/api/pay',{params:{
            title:"车票",
            id:new Date().getTime(),
            price:state.tick.vip
        }})
        window.open(res.data.data)
        navigate('/order')
    }
  return (
    <div>
      <NavBar onBack={()=>navigate(-1)}>详情页</NavBar>
      <h2>乘车信息</h2>
      <LIstItem v={state}></LIstItem>
      <h2>
        <span>乘车人</span>
        --
        <Button color='primary' fill='outline' onClick={()=>setVisible(true)}>添加乘车人</Button>
      </h2>
      <div>
        {
            personList.map((v)=>{
                return (
                    <div key={v.id} style={{display:"flex", lineHeight:"30px", justifyContent:"space-around", padding:10}}>
                        <span>姓名:{v.name}</span>
                        <span>身份证:{v.code}</span>
                        <Button size='mini' color='danger' onClick={()=>handleDel(v)}>删除</Button>
                    </div>
                )
            })
        }
      </div>
      <h2>选座</h2>
      <div>
        {
            list.map((v,i)=>{
                return <Button onClick={()=>setSite(v)} color={v==site ? 'primary' : 'default'} key={i}>{v}</Button>
            })
        }
      </div>
      <Button style={{marginTop:10}} block color='primary' onClick={()=>handleSend()}>立即支付</Button>
        {
            visible && (
                <Mask style={{display:"flex", alignItems:"center", justifyContent:"center",}}>
                    <div style={{background:"#fff"}}>
                        <h1 style={{textAlign:"center"}}>添加乘车人</h1>
                        <Form onFinish={onFinish} layout='horizontal' footer={
                        <Button block type='submit' color='primary' size='large'>
                            提交
                        </Button>
                        }>
                            <Form.Item label='姓名' name='name'>
                                <Input></Input>
                            </Form.Item>
                            <Form.Item label='身份证' name='code'>
                                <Input></Input>
                            </Form.Item>
                        </Form>
                    </div>
                </Mask>
            )
        }
    </div>
  )
}

export default Detail
